@import url(base.less);
/* 声明标准值 */

@baseSzie:3.75vmin;
body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
a{
	text-decoration: none;
	color: #333;
}
.suspension{
	z-index: 999;
	position: fixed;	
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	.m-navbar{
		padding: 0px (12 / @baseSzie) 0px (18 / @baseSzie);
		display: flex;
		justify-content: space-between;
		height: 44 / @baseSzie;
		align-items: center;
		.search	{
			width: 22 / @baseSzie;
			height: 22 / @baseSzie;
			display: inline-block;
			.ic_search_tab{
				font-size: 22 / @baseSzie;
			}
		}
		
		.logo{
			i{
				font-size: (28 / @baseSzie);
				color: pink;
			}
		}
		.right{
			display: flex;
			
			.face{
				width: 24 / @baseSzie;
				height: 24 / @baseSzie;
			    margin: 0 (20 / @baseSzie);
			}
			.app-btn{
				width: 72 / @baseSzie;
				height: 24 / @baseSzie;
				border-radius: 50%;
			}
			img{
				width: 100%;
				height:100%;
			}
		}
	}
	.channel-menu{
		position: relative;
		height: 40 / @baseSzie;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid black;
		.tab{
			flex: 1;
			overflow: hidden;
			.tabs-list{
				    
					display: flex;
					a{
						padding: 0 (16 / @baseSzie);
						white-space: nowrap;
						font-size: 14 / @baseSzie;
						height: 40 / @baseSzie;
						line-height: 40 / @baseSzie;
					}
				    .line{
						position: absolute;
						left: 16 / @baseSzie;
						bottom: -1 / @baseSzie;
						width: 28 / @baseSzie;
						height: 2 / @baseSzie;
						background-color: pink;
						
					}
			}
		}
		.after{
			width: 40 / @baseSzie;
			height: 40 / @baseSzie;
			line-height: 40 / @baseSzie;
		
			text-align: center;
			color: #ccc;
			i{
					font-size: 20 / @baseSzie;
			}
		}
		
	}
}
.m-home{
    padding: (85 / @baseSzie) (5 / @baseSzie) 0 (5 / @baseSzie);
	.video-list{
		display: flex;
		flex-wrap: wrap;
		.video{
			box-sizing: border-box;
			width: 50% ;
			padding: (8 / @baseSzie) (5 / @baseSzie) ;
			.card{
				position: relative;
				height:97 / @baseSzie;
				img{
					width: 100%;
					height:100%;
				}
				.count{
					position: absolute;
					left: 0;
					bottom: 0;
					height: 27 / @baseSzie;
					width: 100%;
					
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-image: linear-gradient(180deg,transparent,green);
					i{
						font-size: 12 / @baseSzie;
					}
				}
			}
			p{
				margin-bottom: 0;
				margin-top:6 / @baseSzie ;
				font-size: 12 / @baseSzie;
			}
		}
	}
}
.rear{
	position: fixed;
    left: 0;
	bottom: 40 / @baseSzie;
	width: 100%;
	height: 30 / @baseSzie;
	.app{
		border-radius: 20px;
		height: 40 / @baseSzie;
		line-height:40 / @baseSzie;
		text-align: center;
		margin: 0 (20 / @baseSzie);
		background-color: red;	
		i{
			color: #fff;
		}
	}
}